<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="sus-window">启动</button>
    <button class="sus-window">打开</button>
    <button class="sus-window">关闭</button>
    <button class="sus-window">关闭</button>
    <!-- 开发模式  兼容环境 PC  ie8   ie8+  （ie6++      -->
    <script>
        var a = "2.111121";
        var obj = {
            name:"窗口系统",
            desc:"这是一个窗口系统",
            open:function(){ //打开一个窗口
                var box = document.querySelector('.box');
                if(box == null){
                    obj.init();
                }else{
                    box.style.display = "block"
                }
            },
            close:function(){ //关闭窗口
                var box = document.querySelector('.box');
                if(box){
                    box.style.display = "none"
                }
            },
            init:function(){  //初始化
                var box = document.createElement('div'); //最大盒子
                var style = document.createElement('style') //组件 组件的html   组件的css  组件js
                style.innerHTML = '.box{width: 100px;height: 100px;background-color: coral;}.box .txt{width: 100%;text-align: center;color: #fff;}';
                document.head.appendChild(style);
                box.className = "box";
                box.innerHTML = '<div class="txt">启动中</div>';
                document.body.appendChild(box);
            }
        }
        
        
        var susWs = document.querySelectorAll('.sus-window');
        for(var i= 0; i< susWs.length; i++){
            var ele = susWs[i];
            ele.setAttribute('data-index',i)
            ele.onclick = function(){
                var idx = this.dataset.index;
                switch(idx){
                   case 0:
                   obj.init(); 
                    break;
                    case 1:
                    obj.open();
                    break;
                    case 2:
                    obj.close();
                    break;
                }
            }
        }
    </script>
</body>
</html>